
<div>
  <label>name: 
    <input [(ngModel)]="hero.name" placeholder="name"/>
  </label>
</div>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    <!-- <a routerLink="/detail/{{hero.id}}"> -->
    <a>
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
  </li>
</ul>
<div>
  <input #box (keyup)="onkey(box.value)"/>
  <p>{{value}}</p>
  
</div>
<h1>{{testvalue}}</h1>
<div *ngIf="selectedHero">

  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </label>
  </div>

</div>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>